/*
* 多比例图片裁剪上传组件
* 依赖 jquery,bootstrap3组件的js/css cropper插件
* 依赖 comic_cropper.js 以及样式 comic_cropper_modal.css
* 由于封装了签名等相关信息，还依赖以下js，缺少将会产生不可预料的错误
* <script type="text/javascript" src="lib/crypto/crypto/crypto.js"></script>
* <script type="text/javascript" src="lib/crypto/hmac/hmac.js"></script>
* <script type="text/javascript" src="lib/crypto/sha1/sha1.js"></script>
* <script type="text/javascript" src="lib/base64.js"></script>
* */
(function($,methodName){
    $(function(){
        if(!ComicCropper){
            console.error("没有找到comicCropper!");
            return false;
        }

        //简单粗暴的丢入html
        var htmlStr='<div class="modal fade" id="clipModal" role="dialog" aria-labelledby="modalLabel" tabindex="-1">\
                        <div id="modalDoc" class="modal-dialog modal-lg" role="document">\
                            <div class="modal-content">\
                                <div class="modal-header">\
                                    <h5 class="modal-title" id="modalLabel"></h5>\
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
                                </div>\
                                <div class="modal-body">\
                                    <div id="clipWrap" class="clip-wrap">\
                                        <div class="clip-main">\
                                            <div class="clip-canvas">\
                                                <div class="img-container">\
                                                    <img id="clipImg" src="img/transparent.png" alt="Picture">\
                                                </div>\
                                            </div>\
                                            <div class="clip-btns">\
                                                <div id="specialFile" class="pull-left mr10">\
                                                    <label class="btn btn-primary" for="fileInput1">\
                                                        <input type="file" class="sr-only file-input" id="fileInput1" name="file">\
                                                        <span>选择图片</span>\
                                                    </label>\
                                                </div>\
                                                <span id="clipNotice"></span>\
                                                <div class="pull-right">\
                                                    <button id="exitBtn" type="button" class="btn btn-default">取消</button>\
                                                    <button id="clipBtn" type="button" class="btn btn-primary">确定裁剪</button>\
                                                </div>\
                                            </div>\
                                        </div>\
                                        <div id="clipHandle" class="clip-handle">\
                                            <div class="clip-split">\
                                                <div id="buttonGroup" class="btn-group-vertical">\
                                                </div>\
                                                <div class="clip-handle-bottom">\
                                                    <label class="btn btn-primary" for="fileInput2">\
                                                        <input type="file" class="sr-only file-input" id="fileInput2" name="file">\
                                                        <span>选择图片</span>\
                                                    </label>\
                                                    <label id="clipSub" class="btn btn-primary clip-sub" >\
                                                        <span title="上传图片" data-original-title="submit checked picture">上传图片</span>\
                                                    </label>\
                                                </div>\
                                            </div>\
                                            <div id="clipView" class="clip-view"></div>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>\
                        </div>\
                    </div>\
                <div id="cover" class="cover"><span>请稍候...</span></div>';

        //粗暴的丢入body
        $('body').append(htmlStr);
        //封装裁剪功能
        //init:初始化结构（但还不能使用）
        //use：载入某个json数据用于裁剪
        var clipModal={
            _urlTool:window.URL || window.webkitURL||null, // 获得原生的URL
            _config:{
                console:true,//是否在控制台显示console
                autoJoin:true,//是否在检测到手选图片合适时跳过裁剪
                type:"jpg,jpeg,png,gif,bmp,tiff",//允许上传的图片后缀
                size:2,//大小(MB)
                area:[568,419], //裁剪容器尺寸
                maxBtn:10,  //最大按钮数量
                special:false, //使用单规格模式(不显示多个配置项，仅使用一个配置减少裁剪过程)
                submitCallback:null //每次上传一张裁剪后的图片时调用，可从形参中获取此次提交的图片内容
            },
            _glb:{//全局访问变量
                host:null, //上传图片根地址
                title:"裁剪图片",//title文字
                notice:"请选择图片",//notice文字
                blank:"",//裁剪区域加载失败显示的默认背景图
                preview:""//预览区域图片加载失败或默认显示的空白图
            },
            _option:[//分组数据
//                {
//                    param:{
//                        "clipname": '中间的别名2:1', //显示在按钮上的文字（必填）
//                        "clipsize": [800,400], //真实尺寸比例（必填）
//                        "osspath": "img/blank.jpg", //已有图片地址（可选）
//                        "previewHost": '', // 单张图片上传地址，如果有 覆盖全局host(可选)
//                        "suffix": '-middle.zymk' // 预览后缀 （可选）
//                    },
//                    cache:{
//                        img:null,//储存对应的img节点
//                        blob:null//用于储存临时保存的blob
//                    }
//                },
            ],
            _cacheCallPic:null,//调用缓存回调时传入的图片
            _cacheCall:null,//缓存的回调函数
            _index:null,//当前裁剪尺寸约束为第几个
            _dom:{},//缓存节点
            _comicCropper:null,//缓存的comicCropper实例
            _console:function(msg,obj){//调试内容,通过config.console打开调试
                if(!this._config.console){
                    return this;
                }
                this._console._count?this._console._count++:(this._console._count=1);
                var str=this._console._count+"=>"+msg;
                if(typeof obj==="object"){
                    console.log(str,obj);
                }
                else {
                    console.log(str);
                }
                return this;
            },
            _error:function(msg){//报错方式，这里仅在控制台输出错误
                console.error(msg);
            },
            _showModal:function(isSpc){
                //针对isSpc参数显示不同的节点
                this.dom('doc')[isSpc?'removeClass':'addClass']('modal-lg')
                this.dom('clipWrap')[isSpc?'addClass':'removeClass']('clip-wrap-special')
                this.dom('specialFile')[isSpc?'show':'hide']()
                this.dom('clipHandle')[isSpc?'hide':'show']()

                this.dom("modal").modal("show");//这里是用的bootstrap的显示方法
            },
            _hideModal:function(){
                this.dom("modal").modal("hide");//这里是用的bootstrap的显示方法
            },
            //异步操作遮罩
            _closeLoading:function(){
                //这里使用外部定义的cover方法
                cover(0);
                return this;
            },
            _openLoading:function(){
                //这里使用外部定义的cover方法
                cover(1,1);
                return this;
            },
            //同步弹窗
            _alert:function(msg){
                //这里使用window.alert
                alert(msg);
                return this;
            },
            //同步confirm
            _confirm:function(msg,fn){
                //这里使用window.alert
                confirm(msg)&&fn();
                return this;
            },
            //获取缓存的节点，对于存入选择器的节点会重新获取
            dom:function(name){
                var d=this._dom[name];
                if(typeof d==="string"){
                    d=$(d);
                }
                return d;
            },
            //初始化，初始化后需要用use方法传入json来调用
            init:function(glb, config){
                //判断相应dom是否存在
                var clipModal=$("#clipModal");
                if(!clipModal.length){
                    this._error("没有找到裁剪modal");
                    return this;
                }
                //初始化dom
                this._dom.doc=$("#modalDoc");//弹窗包裹器
                this._dom.modal=clipModal;//容器
                this._dom.title=$("#modalLabel");//容器标题
                this._dom.notice=$("#clipNotice");//容器标题
                this._dom.clipWrap=$("#clipWrap");//裁剪板块
                this._dom.img=$("#clipImg");//用于初始化cropper的图片
                this._dom.specialFile=$("#specialFile");//特殊模式下的input
                this._dom.exitBtn=$("#exitBtn");//取消裁剪按钮
                this._dom.clipBtn=$("#clipBtn");//确认裁剪按钮
                this._dom.clipHandle=$("#clipHandle");//工具和预览板块
                this._dom.btnWrapper=$("#buttonGroup");//裁剪方式按钮组
                this._dom.fileInput=$(".file-input");//裁剪input
                this._dom.sub=$("#clipSub");//提交所有按钮
                this._dom.viewWrapper=$("#clipView");//预览组容器
                this._dom.btnList=".clip-btn-item";//按钮
                this._dom.viewList=".clip-view-item";//预览容器
                //初始化全局参数
                if(typeof glb==="object"&&glb.host){
                    this._glb.host=glb.host;
                    glb.title&&(this._glb.title=glb.title);
                    glb.blank&&(this._glb.blank=glb.blank);
                    glb.preview&&(this._glb.preview=glb.preview);
                    glb.accessid&&(this._glb.accessid=glb.accessid);
                    glb.accesskey&&(this._glb.accesskey=glb.accesskey);
                }
                this._console("clipModal对初始化,glb:",this._glb);
                this._console("clipModal对初始化,config:",this._config);
                //初始化配置
                if(typeof config === 'object'){
                    config.special&&(this._config.special = !!config.special)
                    typeof config.submitCallback === 'function'&&(this._config.submitCallback = config.submitCallback)
                }
                //初始化裁剪弹窗内容
                this._glb.notice="只支持"+this._config.type+",大小不超过"+this._config.size+"M";
                this.dom("modal").hide();
                this.dom("title").text(this._glb.title);
                this.dom("notice").text(this._glb.notice);
                //事件绑定--------------------start
                //点击上传图片
                var self=this;
                this.dom("sub").on("click",function(){
                    //检查cache中是否有保存的blob
                    var mask=false;
                    self._option.forEach(function(t){
                        if(t.cache.blob){
                            mask=true;
                        }
                    });
                    if(mask){
                        if(confirm("确定要提交已经裁剪过的图片吗？")){
                            self.submit();
                        }
                    }
                    else {
                        alert("您还没有保存过任何裁剪后的图片！");
                        return this;
                    }
                });
                //modal自动关闭时调用一次close("bootstrap")
                this.dom("modal").on('hidden.bs.modal', function () {
                    self.close();
                });
                //确定裁剪按钮触发裁剪
                this.dom("clipBtn").on("click",function(){
                    //在特殊模式下此按钮的功能变为裁剪后立即提交
                    if(self._config.special){
                        self.clip(function(){
                            //确定裁剪后自动填充裁剪结果到cropper,并尝试提交图片
                            self.active(self._index).reload(self._index,function(){
                                self._openLoading();
                                setTimeout(function(){
                                    self.dom("sub").click()
                                    self._closeLoading();
                                },200)
                            });
                        });
                    }
                    else {
                        self.clip(function(){
                            //确定裁剪后自动填充裁剪结果到cropper
                            self.active(self._index).reload(self._index);
                        });
                    }
                });
                //按钮组中按钮点击切换种类
                this.dom("btnWrapper").on("click",".clip-btn-item",function(){
                    var _t=$(this);
                    var index=_t.index();
                    if(!_t.hasClass("active")){
                        self.active(index).reload(index);
                    }
                });
                //预览框处理情况和按钮组相同
                this.dom("viewWrapper").on("click",".clip-view-item",function(){
                    var _t=$(this);
                    var index=_t.parent().index();
                    if(!_t.hasClass("active")){
                        self.active(index).reload(index);
                    }
                });
                //取消按钮关闭modal
                this.dom("exitBtn").on("click",function(){
                    self.close(true);
                });
                //--------------------------end
                //初始化裁剪插件(默认比例配置取第一个)
                this._comicCropper=new ComicCropper();
                var option={
                    container: '.img-container',//做了边界判断，设为较大值是为了让裁剪框最大边抵拢边框
                    image:this.dom("img")[0],
                    aspectRatio:1,
                    dragMode:"move",
                    cropBoxMovable:false,
                    cropBoxResizable:false,
                    cropperDataType: false,
                    minCropBoxWidth:99999,//插件内部
                    actions: '#actions',
                    minContainerWidth:this._config.area[0],
                    minContainerHeight:this._config.area[1],
                    // imageSmoothingEnabled: false,
                    // imageSmoothingQuality: 'high',
//                    getCropperData: function (data) {
//                        if(data){
////                            clipImg.send(data);
//                            var index=$('div[data-toggle="buttons"]').children(".active").index();
//                            self.cacheData[index]=data;
//                            //先保存到右边预览框
//                            readBlobAsDataURL(data,function(dataUrl){
//                                $(".toggle-view").eq(index).attr("src",dataUrl);
//                            });
//                        }
//                    }
                };
                this._comicCropper.init(option);
                this._console("初始化cropper完成");
                //为input file 绑定切换图片功能
                this.dom("fileInput").each(function(){
                    self._comicCropper.bindFileInput(this,function(file,success,defeat){
                        self._console("选择了图片，正在对图片进行验证");
                        //开启异步遮罩，通过载入此图片获取图片宽高判断
                        self._openLoading();
                        //验证图片大小，格式和最小宽高是否符合要求
                        var size=file.size/1024/1024;
                        var type=file.type.match(/\w+$/)[0],typeAry=self._config.type.split(",");
                        if(self._urlTool){//支持URL接口才验证宽高
                            var data=self._option[self._index];
                            var url=self._urlTool;
                            var imgSrc = url.createObjectURL(file);
                            var img= new Image();
                            var imgH,imgW;
                            img.onload=function(e){
                                imgH=this.height;
                                imgW=this.width;
                                url.revokeObjectURL(imgSrc);
                                //进行判断
                                if(size>self._config.size){
                                    self._console("验证失败，图片大小不合适");
                                    defeat();
                                    self._alert("选择图片失败，图片大小不能大于"+self._config.size+"M");
                                    self._closeLoading();
                                }
                                else if($.inArray(type,typeAry)===-1){
                                    self._console("验证失败，图片格式不合适");
                                    defeat();
                                    self._alert("选择图片失败，仅限格式为："+self._config.type+"的图片");
                                    self._closeLoading();
                                }
                                else if(imgW<data.param.clipsize[0]||imgH<data.param.clipsize[1]){
                                    self._console("验证失败，图片尺寸不合适");
                                    defeat();
                                    self._alert("选择图片失败，请选择像素宽高大于"+data.param.clipsize[0]+"x"+data.param.clipsize[1]+"的图片！")
                                    self._closeLoading();
                                }
                                else {
                                    self._console("验证通过");
                                    success();
                                    self._closeLoading();
                                    //检测到图片刚好符合大小
                                    if(self._config.autoJoin&&imgW===data.param.clipsize[0]&&imgH===data.param.clipsize[1]){
                                        self._confirm('您选择的图片恰好满足裁剪尺寸，是否直接保存图片？',function(){
                                            readBlobAsDataURL(file,function(dataUrl){
                                                self.skipClip(dataUrl,file);
                                            });
                                        });
                                    }
                                }
                            };
                            img.onerror=function(){
                                defeat();
                                self._console("异常错误，无法载入图片!");
                                self._closeLoading();
                            };
                            img.src=imgSrc;
                        }
                        return true;
                    });
                })
            },
            //指定某个数据重载cropper async
            //index:载入第几个数据
            //callback:重载完毕执行回调
            reload:function(index,callback){
                var i,call,self=this;
                i=index?index:0;
                call=typeof callback==="function"?callback:function(){};
                var data=this._option[i];
                if(!data){
                    return this;
                }
                if(data.cache.blob){
                    this._console("读取了blob数据到clip区域",data);
                    //如果有缓存的blob，优先读取blob到裁剪中
                    this._comicCropper.reload(data.cache.blob,{
                        aspectRatio:data.param["clipsize"][0]/data.param["clipsize"][1]
                    },function(){
                        self._index=i;
                        call();
                    });
                }
                else {
                    this._console("读取了默认的src数据到clip区域",data);
                    //这里先执行数据中src的读取操作，如果图片加载失败，使用默认的预览图
                    var ni=new Image();
                    var callFn=function(src){
                        // self._comicCropper.reload(src,{
                        //     aspectRatio:data.param["clipsize"][0]/data.param["clipsize"][1],
                        //     ready:function(){
                        //         self._closeLoading();
                        //         call();
                        //         self._index=i;
                        //     }
                        // });
                        //这里有个问题，cropper对于图片自己加了随机值，所以即使做了预加载，还是会重新载入一次，会引起裁剪不到图片
                        //所以这里强行将canvas里面的那张加了随机数的src，成功后才关闭遮罩，避免裁剪出空白
                        self._comicCropper.reload(src,{
                            aspectRatio:data.param["clipsize"][0]/data.param["clipsize"][1]
                        },function(){
                            var afterSrc=self.dom("img").siblings(".cropper-container").find('.cropper-canvas > img').attr("src");
                            self._console("获取cropper中附加随机数的图片：",afterSrc);
                            var ni2=new Image();
                            ni2.onload=function(){//由于已经预加载过了，不用担心error
                                self._closeLoading();
                                self._index=i;
                                call();
                            };
                            ni2.onerror=function(){//失败了卧槽???
                                self._error("加载图片异常，请检查默认的blank图片是否存在！");
                            };
                            ni2.src=afterSrc;
                        });
                    };
                    ni.onload=function(){
                        self._console("预加载src成功，使用了src："+self._glb.host+data.param.osspath);
                        callFn(self._glb.host+data.param.osspath);
                    };
                    ni.onerror=function(){
                        self._console("预加载src失败，使用默认的图片："+self._glb.host+self._glb.blank);
                        callFn(self._glb.blank);
                    };
                    this._openLoading();
                    ni.src=this._glb.host+data.param.osspath;
                }
                return this;
            },
            //执行裁剪操作
            //callback:回调
            clip:function(callBack){
                this._openLoading();
                var self=this;
                this._comicCropper.getData("blob",function(blob){
                    console.log(blob)
                    if(!blob){
                        self._error("目前裁剪区域没有图片！");
                        self._closeLoading();
                        return false;
                    }
                    var data=self._option[self._index];
                    //右边预览框载入base64数据图片
                    readBlobAsDataURL(blob,function(dataUrl){
                        self.dom("viewList").find("img").eq(self._index).attr("src",dataUrl);
                        typeof callBack==="function"&&callBack();
                    });
                    //缓存blob到cache中
                    data.cache.blob=blob;
                    self._closeLoading();
                    self._console("对图片进行了裁剪");
                });
                return this;
            },
            //直接保存某张图片
            skipClip:function(img,file){
                this.dom("viewList").find("img").eq(this._index).attr("src",img);
                this._option[this._index].cache.blob=file;
                this._console("跳过了裁剪，直接保存了图片和file");
                return this;
            },
            //销毁cropper
            destroy:function(){//重置所有内容（包括初始化cropper，重置html内容，重置cache）
                this._option=[];
                if(this._comicCropper){
                    this._comicCropper.destroy();
                    this._comicCropper=this._cacheCall=this._cacheCallPic=null;
                }
                this.whiteHtml();
                return this;
            },
            submit:function(){//提交保存的所有内容
                //循环提取多个数据
                var subAry=[],self=this;
                this._option.forEach(function(t){
                    if(t.cache.blob){
                        subAry.push({
                            text:t.param.clipname,
                            host:t.param.previewHost||self._glb.host,
                            blob:t.cache.blob,
                            name:t.param.name,
                            dir:t.param.dir,
                            path:t.param.osspath,
                            size:t.param.clipsize,
                            img:t.cache.img[0],//由于只有经过裁剪的才会被提取，所以这里的img必然是baseurl而不是缩放后的图片
                            exp:null
                        });
                    }
                });
                if(subAry.length===0){
                    this._alert("您还没有保存过任何裁剪后的图片！");
                    return this;
                }
                this._console("提取了已裁剪的图片",subAry);
                //对每个数据进行缩放操作，使它保持指定的像素宽高
                var blobData,cv,max=subAry.length,count=0;
                this._openLoading();

                subAry.forEach(function(t){
                    blobData=t.blob;
                    //1.创建一个指定size的canvas
                    cv=document.createElement("canvas");
                    var tmpW = Math.ceil(t.size[0]);
                    var tmpH = Math.ceil(t.size[1]);
                    cv.width = tmpW;
                    cv.height = tmpH;
                    //2.将img节点绘制到canvas中
                    cv.getContext('2d').drawImage(t.img, 0, 0, tmpW, tmpH);
                    cv.toBlob(function(b){
                        count++;
                        t.exp=b;
                        if(count===max){
                            self._console("对所有图片进行了指定比例的压缩",subAry);
                            doSend();
                        }
                    }, t.blob.type);
                });
                //3.提交整理后的blob数据
                function doSend(){
                    self._closeLoading();
                    //实现多个ajax依次回调执行，即使失败，下一个ajax依然会执行
                    var data,dataOpt,formData,errorAry=[];
                    //最后一张图片上传完毕执行回调
                    var postEnd=function(){
                        self._console("提交结束，失败的图片为",errorAry);
                        if(errorAry.length==0){
                            self._alert("上传成功!");
                        }
                        else if(errorAry.length<subAry.length){
                            var erStr='部分图片上传失败，失败的图片分别为';
                            errorAry.forEach(function(t){
                                erStr+=t.text+'，';
                            });
                            erStr+='。';
                            self._alert(erStr);
                        }
                        else {
                            self._alert("上传失败，请检查网络!");
                        }
                        //设置当前显示图片为第一张
                        self._cacheCallPic=self._glb.host+self._option[0].param.osspath;
                    };
                    var countAjax=function(){
                        countAjax._count++;
                        var i=countAjax._count;
                        var max=countAjax._max;
                        if(max<i){
                            self._closeLoading();
                            postEnd();
                            return false;
                        }
                        data=subAry[i-1];
                        dataOpt=getUploadConfig({
                            accessid: self._glb.accessid,
                            accesskey: self._glb.accesskey,
                            filename:data.name,  // 上传文件名称可以在这里自己指定，默认为上传图片名称
                            dirname: data.dir || '' // 上传目录
                        });
                        self._console("目前正在提交第"+i+"张图片,提供给installFormData的参数为",dataOpt);
                        formData=installFormData(dataOpt, data.exp);
                        $.ajax({
                            url:data.host,
                            type: 'post',
                            contentType: false,
                            processData: false,
                            async: false, //  不发送同步请求
                            cache: false, // 设置为false将不会从浏览器缓存中加载请求信息
                            data: formData,
                            success: function (res, req) {
                                typeof self._config.submitCallback === 'function' && self._config.submitCallback(true,data,dataOpt)
                                countAjax();
                            },
                            error: function (res) {
                                typeof self._config.submitCallback === 'function' && self._config.submitCallback(false,data,dataOpt)
                                errorAry.push(data);
                                countAjax();
                            }
                        });
                    };
                    countAjax._count=0;
                    countAjax._max=subAry.length;
                    countAjax._end=function(){
                        self._closeLoading();
                    };
                    self._openLoading();
                    countAjax();
                }
                return this;
            },
            //使用某个配置来进行裁剪操作
            //callback:接收两个参数isSub(是否完成了上传图片) pic(如果完成了上传图片，会返回第一个尺寸的图片)
            use:function(config,callBack){
                if(Object.prototype.toString.call(config)!=="[object Array]"){
                    this._error("数据格式有误!");
                    return this;
                }
                if(config.length===0){
                    this._error("缺少数据！");
                    return this;
                }
                if(config.length>7){
                    config.length=7;
                    this._error("最多支持7组数据！");
                    return this;
                }
                if(typeof callBack==="function"){
                    this._cacheCall=callBack;
                }
                //存入option
                var self=this,obj;
                self._option=[];
                config.forEach(function(t){
                    obj={
                        param:t,
                        cache:{
                            img:null,//储存预览img
                            blob:null//用于储存临时保存的blob
                        }
                    };
                    //从osspath中解析出文件名称和路径
                    obj.param.name=obj.param.osspath.match(/[^\/]*?$/)[0];
                    obj.param.dir=obj.param.osspath.match(/^[\s\S]*\//)[0];
                    self._option.push(obj)
                });
                //构建html
                this.whiteHtml();
                //按照新数据重载cropper 默认载入第一条数据的图片
                var showSpecial = this._config.special&&config.length===1
                this.reload(0,function(){
                    //显示modal
                    self._showModal(!!showSpecial);
                    self._console("载入json成功，打开了modal");
                });
                this.active(0);
                this._console("载入了新的json：",config);
                return this;
            },
            //关闭modal，同时触发调用use时传入的回调
            //isHandle:是否为手动触发，手动触发将会调用一次hideModal
            close:function(isHandle){
                if(typeof this._cacheCallPic==="function"){
                    this._cacheCall(!!this._cacheCallPic,this._cacheCallPic);
                }
                !!isHandle&&this._hideModal();
                this._console("载入json成功，打开了modal");
                return this;
            },
            //根据option构建按钮组和预览组
            whiteHtml:function(){
                if(this._option.length){
                    var self=this;
                    var buttonHtml='',viewHtml='',tempData,tempAry,i=0;
                    var rdNum=parseInt(Math.random()*1000000);
                    this._option.forEach(function(t){
                        i++;
                        tempData=t.param;
                        //通过最大公约数获取比例
                        tempAry=[];
                        tempAry[0]=getMaxDivisor(tempData["clipsize"][0],tempData["clipsize"][1]);
                        tempAry[1]=tempData["clipsize"][0]/tempAry[0];
                        tempAry[2]=tempData["clipsize"][1]/tempAry[0];
                        buttonHtml+='<label class="btn btn-primary clip-btn-item">' +
                            '<span> '+tempData["clipname"]+' </span>\n' +
                            '</label>';

                        viewHtml+='<div class="clip-view-row toggle-wrap">' +
                            '<div class="clip-view-box clip-view-item">' +
                            '<img class="clip-view-img'+i+'" src="'+self._glb.host+tempData["osspath"]+tempData["suffix"]+'?'+rdNum+'" alt="" onerror=\'this.src=\"' +self._glb.preview+ '\";\'>' +
                            '</div>' +
                            '<div class="clip-view-des">'+tempAry[1]+' : '+tempAry[2]+'</div>' +
                            '</div>';
                        t.cache.img=".clip-view-img"+i;
                    });
                    this.dom("btnWrapper").html(buttonHtml);
                    this.dom("viewWrapper").html(viewHtml);
                    //转化所有的cache img 为真实的dom对象
                    this._option.forEach(function(t){
                        t.cache.img=$(t.cache.img);
                    });
                }
                else {
                    this.dom("btnWrapper").html();
                    this.dom("viewWrapper").html();
                }
            },
            //将焦点对准其中一个尺寸 会将样式调整为指定位置，并不会调整cropper裁剪源数据
            //index:序号
            active:function(index){
                var i=index?index:0;
                this.dom("btnList").removeClass("active").eq(i).addClass("active");
                this.dom("viewList").removeClass("active").eq(i).addClass("active");
                return this;
            }
        };
        //暴露给window
        methodName&&(window[methodName]=clipModal);
        // 配置图片上传
        function getUploadConfig(opt) {
            var policyText = {
                expiration: new Date(Date.now() + (opt.uploadExpire|| 36e5)), // 设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
                conditions: [
                    ['content-length-range', 0, (opt.uploadMaxSize || 1048576000)] // 设置上传文件的大小限制
                ]
            };

            var message = Base64.encode(JSON.stringify(policyText));
            var bytes = Crypto.HMAC(Crypto.SHA1, message, opt.accesskey, {asBytes: true});
            var signature = Crypto.util.bytesToBase64(bytes);

            // 设置上传图片名字
            var filename = opt.filename || 'default.jpg';
            // 上传更目录不填写，存在目录以: **/**/方式构建目录
            var dirname = (function(dirname, filename) {
                if (!dirname) return '';
                return (dirname.lastIndexOf('/') >= 0 ? dirname : dirname + '/')
            })(opt.dirname, filename);

            return {
                key: dirname + filename,
                policy: message,
                success_action_status: opt.success_action_status || '200', // 让服务端返回200,不然，默认会返回204
                OSSAccessKeyId: opt.accessid,
                signature: signature,
                filename: filename,
                dirname: dirname
            }
        }
        // 组装上传图片FormData
        function installFormData(options, data) {
            var formData = new FormData();
            // 将配置追加到formData数据中
            $.each({
                filename: options.filename,
                key: options.key,
                policy: options.policy,
                success_action_status: options.success_action_status,
                OSSAccessKeyId: options.OSSAccessKeyId,
                signature: options.signature
            }, function(key, item) {
                formData.append(key, item)
            });
            // 获取到formData数据，可提POST提交套服务器
            formData.set('file', data, options.filename);
            return formData;
        }
        //转化blob对象为dataurl
        function readBlobAsDataURL(blob, callback) {
            var a = new FileReader();
            a.onload = function(e) {callback(e.target.result);};
            a.readAsDataURL(blob);
        }
        //获取a和b的最大公约数
        function getMaxDivisor(a,b){
            if(b===0){return a;}
            return getMaxDivisor(b,a%b);
        }
        //遮罩层显示、隐藏
        function cover(show,gray) {
            !cover["_layer"] && (cover["_layer"] = $("#cover"));
            !!show&&cover["_layer"].css({"background-color":!!gray?"rgba(0,0,0,0.3)":"transparent"});
            cover["_layer"][!!show ? "show" : "hide"]();
        }
    });
})(jQuery,"clipModal");

